<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Fan Control</title>
		<!-- Include jQuery/Mobile -->
		<link href="jquery-mobile/themes/ucxpresso-1.3.1.min.css" rel="stylesheet" type="text/css" />
<!-- off-line
		<link href="jquery-mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" rel="stylesheet" type="text/css" />
		<script src="jquery/1.9.1/jquery-1.9.1.min.js" type="text/javascript"></script>
		<script src="jquery-mobile/1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript" ></script>
-->
		<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css" />
		<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
		
		<!-- Include Google Chart API -->
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript">
			google.load('visualization', '1', {
				packages : ['gauge']
			});
		</script>
		
		<!-- RPM & Control -->
		<script type="text/javascript">
			var gauge;
			var data;
			var options;

			function chart_init() {
				// initialize Gauge
				data = google.visualization.arrayToDataTable([['RPM'], [0]]);

				options = {
					min : 0,
					max : 3000,
					height : 2000,
					greenFrom:1800,
					greenTo:3000,
					yellowFrom : 1200,
					yellowTo : 1800,
					redFrom : 0,
					redTo : 500,
					minorTicks : 5,
					animation : {
						uration : 1000,
						asing : 'out'
					}
				};

				gauge = new google.visualization.Gauge(document.getElementById('gauge'));
				gauge.draw(data, options);

			}

			google.setOnLoadCallback(chart_init);

			//  update dynamic information by WebSocket Event
			if (window["WebSocket"]) {
				var socket;
	    		var host = window.location.hostname;							// 取得主機名稱 (與瀏覽器輸入的網址相同)
	    		var port = window.location.port;								// 取得連線 port number
				socket = new WebSocket("ws://" + host + ":" + port + "/fan");	// 建立 WebSocket 物件, service name='fan'
					
				socket.onmessage = function(evt) {
					var msg = JSON.parse(evt.data);
					// receive JSON object from uCXpresso
					// update gauge
					if (data) {
						data.setValue(0, 0, msg.rpm);
//						data.setValue(0, 1, msg.cpu);
//						data.setValue(0, 2, msg.net);
						gauge.draw(data, options);
					}
				} // end of onmessage
				
				function onEvent(cmd, val) {
					if ( socket.readyState==1 ) {
						var msg;
						msg =  { command:cmd, value: parseInt(val)};	// make JSON object
						socket.send(JSON.stringify(msg));				// send message with JSON format string
					} else {
						// reconnect
						socket = new WebSocket("ws://" + host + ":" + port + "/fan");	
					}
				} // end of onEvent
			}
		</script>
		
	</head>
	<body>
		<div data-role="page" id="page">
		  	<div data-role="header" data-theme="b">
		    	<h1>Fan Control</h1>
		  	</div>
			<div data-role="content">
				<div id="gauge"></div>
				<div data-role="fieldcontain">
		            <label for="pwm" class="ui-input-text ui-slider">PWM:</label>
            		<input id="pwm" type="range" name="slider" value="50" min="0" max="100" onchange="onEvent(0, this.value);" data-highlight="true" data-track-theme="d">
        		</div>
        	</div>
			<div data-role="footer">
				<h4>uCXpresso</h4>
			</div>
		</div>
	</body>
</html>
